<template>
    <panelHead :route="route" />
    <div id="wrapper">
        <el-table :data="tableData.list" stripe style="width: 100%">
            <el-table-column prop="id" label="id" width="100px"/>
            <el-table-column prop="name" label="昵称" width="100px"/>
            <el-table-column label="权限级别" width="120px">
                <template #default="scope">
                    {{ permissionName(scope.row.permissions_id) }}
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="120px"/>
            <el-table-column label="状态" width="95px">
                <template #default="scope">
                    <el-tag :type="scope.row.active ? 'success' : 'danger'">{{ scope.row.active ? '正常' : '失效'
                        }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template #default="scope">
                    <div style="display:flex;line-height:100%;">
                        <el-icon>
                            <Clock />
                        </el-icon>
                        <span style="margin-left:10px;">{{ scope.row.create_time }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="open(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="remove(scope.row.id)">修改状态</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-bg">
            <el-pagination v-model:current-page="paginationData.pageNum" :page-size="paginationData.pageSize"
                :background="background" :page-sizes="[1, 2, 3, 4, 5]" layout="total,  prev, pager, next"
                :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <el-dialog v-model="dialogFormVisible" :before-close="beforeClose" title="编辑用户" width="500">
            <el-form ref="formRef" label-width="100px" label-position="left" :model="form" :rules="rules">
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="form.mobile" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="菜单权限" prop="permissions_id">
                    <el-select v-model="form.permissions_id" placeholder="请选择菜单权限" style="width:200px;">
                        <el-option v-for="(item, index) in options" :key="id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="confirm(formRef)">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { authAdmin, menuSelectList, updateUser } from '../../../api/index';
import { reactive, onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route,'route');


// 编辑表单
const form = reactive({
    mobile:'',
    name: '',
    permissions_id: ''
});

const paginationData = reactive({
    pageNum: 1,
    pageSize: 10
});

onMounted(() => {
    getListData();
    menuSelectList().then(res => {// 下拉列表
        // console.log(res.data);
        options.value = res.data.data;
        console.log(options.value, 'options');
    })
})

// 请求列表
const getListData=()=>{
    authAdmin(paginationData).then(res => {
        // console.log(res);
        tableData.list = res.data.data.list;
        tableData.total = res.data.data.total;
        tableData.list.forEach(element => {
            element.create_time = dayjs(element.create_time).format("YYYY-MM-DD hh:mm:ss");
        });
        console.log(tableData.list, 'tableData');
    })
}

const tableData = reactive({
    list: [],
    total: 0
});

const options = ref([]);

const permissionName = (id) => {

    const data = options.value.find(el => el.id === id);

    return data ? data.name : "超级管理员";

}

const open = (RowData) => {
    dialogFormVisible.value = true;
    form.name=RowData.name;
    form.permissions_id=RowData.permissions_id;
    form.mobile=RowData.mobile;
}

const remove = (id) => {
    tableData.list.forEach(element => {
        if (element.id == id) {
            element.active = !element.active;
        }
    });
}

const handleSizeChange = (pageSize) => {
    paginationData.pageSize = pageSize;
    getList();
}

const handleCurrentChange = (pageNum) => {
    paginationData.pageNum = pageNum;
    getList();
}

const dialogFormVisible = ref(false);// 弹窗状态

const beforeClose = () => {// 关闭前的回调
    dialogFormVisible.value = false;
}

const formRef = ref();

const rules = reactive({
    name: [{
        required: true,
        message: '请输入权限名称',
        trigger: 'blur'
    }],
    permissions_id: [
        {
            required: true,
            message: '请描述菜单权限',
            trigger: 'blur'
        }
    ]
});

const confirm = async (formRef) => {
    if (!formRef) return;
    await formRef.validate((valid) => {
        if (valid) {
            updateUser(form).then(result => {
                console.log(result.data, 'updateUser');
                dialogFormVisible.value = false;
                if(result.data.code===10000){
                    getListData();
                }
            });
        } else {
            return false;
        }
    });
}
</script>

<style lang="less" scoped>
#wrapper {
    margin-top: 15px;
    position: relative;

    .pagination-bg {
        background-color: white;
    }
}
</style>